import { useState } from 'react';
import request from "umi-request";
import styles from './index.less';
import { VPS_IP } from '@/vpsip';

const IndexPage = () => {
  const [records, setRecords] = useState<any[]>([]);
  const [inputValue, setInputValue] = useState<string>();

  const handleEnter = () => {
    request
      .get(`http://${VPS_IP}:8080/chart?input=${inputValue}`)
      .then(response => {
        const {choices} = response
        if (choices && choices.length) {
          records.push({role: 'ROBOT', content: choices[0].message.content});
          setRecords([...records]);
        }
      });
    records.push({role: 'ME', content: inputValue});
    setRecords([...records]);
    setInputValue("");
  }

  return (
    <div>
      <div>
        {records?.map(({role, content}:any) => 
          <div className={role === 'ME' ? styles.me : styles.robot}>
            <p>{role === 'ME' ? 'ME' : 'ROBOT'}: {content}</p>
          </div>)}
      </div>
      <div>
        <textarea 
          className={styles.theInput}
          value={inputValue} 
          onChange={e => setInputValue(e.target.value)} 
          onKeyDown={e => e.key === 'Enter' && handleEnter()}
        />
      </div>
    </div>
  );
}

export default IndexPage;
